<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="telephone=no" name="format-detection">
<title>苗木通讯录</title>
<include file="Public/header"/>
<style type="text/css">
.progress {width:100%;padding: 1px; border-radius:3px;display:none;}
.bar {background-color: green;display:block; width:0%; height:20px; line-height:20px; border-radius: 3px; }
.percent { position:absolute; height:10px; display:inline-block; line-height:20px;  top:3px; left:2%; color:#fff }
</style>
</head>
<body >
<div class=" wrap">
	<!--<form id="myform" method="post" action="" enctype="multipart/form-data">-->
		<div class="top">
			<i class="fa fa-angle-left fa-2x top_l" onclick="window.location.href='{:U('Index/editlist')}'"></i>
			<i class="fa fa-phone fa-lg top_r" id="telephone"></i>
		</div>
		<div class="login_con" style="margin-top:60px;">
			<div class="weui_cells weui_cells_form">
			<div class="progress" >
				<span class="bar"></span><span class="percent"></span>
			</div>
				<div class="weui_cell">
					<div class="weui_cell_bd weui_cell_primary">
						<div class="weui_uploader">
							<div class="weui_uploader_hd weui_cell">
								<div class="weui_cell_bd weui_cell_primary"></div>
								<div class="weui_cell_ft"><!--0/2--></div>
							</div>
							<div class="weui_uploader_bd">
								<ul class="weui_uploader_files">
									<volist name="photo" id="photo">
										<li class="weui_uploader_file" style="width:100%;height:auto;margin-bottom:30px;/*background-image:url(...)*/" >
										<div style="margin:0;padding:0;position:relative;margin-bottom:15px;text-align:center;" onclick="removeimg(this,'{$photo}')">
											<div style="width:100%;height:100%;line-height:30px;position:absolute;top:0;left:0;text-align:center;opacity:0.5;background:#000;z-index:5;"></div>
											<div style="font-size:20px;color:#fff;font-weight:bold; width:100%;line-height:30px;position:absolute;top:0;left:0;text-align:center;padding-top:40%;z-index:10;" >删除</div>
											<img src="{$photo}" style="max-width:100%;margin:0;padding:0;" />
										</div>
										<textarea type="text" placeholder="图片描述" rows="2" style="width:94%;margin-left:3%;padding:0;" class="desc">{$descarr[$photo]}</textarea>
										<button type="text" style="width:94%;height:30px;margin-left:3%;" onclick="desc(this,'{$photo}')">提交</button>
										</li>
									</volist>
								</ul>
								<div class="weui_uploader_input_wrp" style="color:red; background:#b53633;">
									<input class="weui_uploader_input" type="file" accept="image/*" multiple="" id="fileimg" name="fileimg">
								</div>
						</div>
					</div>
				</div>
			</div>
		</div>
			<div style="height:80px;"></div>
		<!--<button class="btn" id="submitimg" type="submit">确认提交</button>-->
		</div>
	<!--</form>-->
	<include file="Public/footern"/>
</div>
</body>
</html>
<script type="text/javascript" src="__PUBLIC__/js/jquery.form.js"></script>
<script type="text/javascript" src="__PUBLIC__/city/jquery.cityselect.js"></script>
<script>
$(function () {
    var bar = $('.bar'); 
    var percent = $('.percent'); 
    var progress = $(".progress"); 
    //var btn = $("#submitimg"); 
    $("#fileimg").wrap("<form id='myupload' action='{:U('Index/ajaxphoto')}'method='post' enctype='multipart/form-data'></form>"); 
    $("#fileimg").change(function(){ //选择文件 
		//var numn = $('.weui_uploader_files').children('li').length;
		//if(numn <=4 ) {
        $("#myupload").ajaxSubmit({ 
            dataType:  'json', //数据格式为json 
            beforeSend: function() { //开始上传 
                progress.show(); //显示进度条 
                var percentVal = '0%'; //开始进度为0% 
                bar.width(percentVal); //进度条的宽度 
                percent.html(percentVal); //显示进度为0% 
                //btn.text("上传中..."); //上传按钮显示上传中 
            }, 
            uploadProgress: function(event, position, total, percentComplete) { 
                var percentVal = percentComplete + '%'; //获得进度 
                bar.width(percentVal); //上传进度条宽度变宽 
                percent.html(percentVal); //显示上传进度百分比 
            }, 
            success: function(data) { //成功 
                //显示上传后的图片 
				if(data.code == 1) {
					var img = data.file; 
					//$('#headimg').attr("src",img); 
					var html = '<li class="weui_uploader_file" style="width:100%;height:auto;margin-bottom:30px;/*background-image:url(...)*/" >\
						<div style="margin:0;padding:0;position:relative;margin-bottom:15px;text-align:center;" onclick="removeimg(this,\''+data.file+'\')">\
							<div style="width:100%;height:100%;line-height:30px;position:absolute;top:0;left:0;text-align:center;opacity:0.5;background:#000;z-index:5;"></div>\
							<div style="font-size:20px;color:#fff;font-weight:bold; width:100%;line-height:30px;position:absolute;top:0;left:0;text-align:center;padding-top:40%;z-index:10;" > 删除</div>\
						<img src="'+data.file+'" style="max-width:100%;margin:0;padding:0;" />\
						</div>\
						<textarea type="text" placeholder="图片描述" rows="2" style="width:94%;margin-left:3%;padding:0;" class="desc"></textarea>\
						<button type="text" style="width:94%;height:30px;margin-left:3%;" onclick="desc(this,\''+data.file+'\')">提交</button>\
						</li>';
					$('.weui_uploader_files').append(html);
				}
				alert(data.msg);
				progress.hide();
                //btn.text("确认提交"); //上传按钮还原 
            }, 
            error:function(xhr){ //上传失败 
                //btn.text("确认提交"); //上传按钮还原 
                bar.width('0'); 
				progress.hide();
				alert(data.msg);
                //files.html(xhr.responseText); //返回失败信息 
            } 
        }); 
		//} else {
		//	alert('最多允许上传5张图片！');
		//}

    }); 
}); 

function removeimg(self,filename) {
	if(confirm('确定要删除这个图片吗！')) {
		var keys = $(self).parent().index();
		var postdata = {key:keys,filename:filename};
		var url = '{:U('Index/ajaxremoveimg')}';
		$.post(url,postdata,function(data){
				if(data.code == 1) {
					$(self).parent().remove();
				} else {
					alert('网络故障，删除失败！');
				}
		},'json');
	}
}

function desc(self,filename) {
	var des = $(self).prev('.desc').val();
	//var keys = $(self).parent().index();
	var postdata = {desc:des,filename:filename};
	var url = '{:U('Index/ajaxeditdesc')}';
	$.post(url,postdata,function(data){
		if(data.code == 1) {
			alert('操作成功！');
		} else {
			alert('网络故障，操作失败！');
		}
	},'json');
}

$(function() {
	$('#active4').css("color","#2abc7c");
	$('#active4').find('i').css("color","#2abc7c");
});

</script>
